<template>
  <div class="reporter-info">
    <!-- 报告人基本信息 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-user"></i>
        <span>报告人基本信息</span>
      </div>
      <div class="form-content">
        <div class="form-item">
          <label>姓名<span class="required">*</span></label>
          <el-input 
            v-model="formData.name" 
            placeholder="请输入报告人姓名"
            clearable
          ></el-input>
        </div>

        <div class="form-item">
          <label>性别</label>
          <el-radio-group v-model="formData.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </div>

        <div class="form-item">
          <label>职务<span class="required">*</span></label>
          <el-input 
            v-model="formData.position" 
            placeholder="请输入职务"
            clearable
          ></el-input>
        </div>

        <div class="form-item">
          <label>所属单位<span class="required">*</span></label>
          <el-input 
            v-model="formData.organization" 
            placeholder="请输入所属单位"
            clearable
          ></el-input>
        </div>

        <div class="form-item">
          <label>所属部门</label>
          <el-input 
            v-model="formData.department" 
            placeholder="请输入所属部门"
            clearable
          ></el-input>
        </div>
      </div>
    </div>

    <!-- 联系方式 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-phone"></i>
        <span>联系方式</span>
      </div>
      <div class="form-content">
        <div class="form-item">
          <label>手机号码<span class="required">*</span></label>
          <el-input 
            v-model="formData.phone" 
            placeholder="请输入手机号码"
            maxlength="11"
            clearable
          ></el-input>
        </div>

        <div class="form-item">
          <label>办公电话</label>
          <el-input 
            v-model="formData.officePhone" 
            placeholder="请输入办公电话"
            clearable
          ></el-input>
        </div>

        <div class="form-item">
          <label>电子邮箱</label>
          <el-input 
            v-model="formData.email" 
            placeholder="请输入电子邮箱"
            clearable
          ></el-input>
        </div>

        <div class="form-item">
          <label>紧急联系人</label>
          <el-input 
            v-model="formData.emergencyContact" 
            placeholder="请输入紧急联系人姓名"
            clearable
          ></el-input>
        </div>

        <div class="form-item">
          <label>紧急联系电话</label>
          <el-input 
            v-model="formData.emergencyPhone" 
            placeholder="请输入紧急联系电话"
            maxlength="11"
            clearable
          ></el-input>
        </div>
      </div>
    </div>

    <!-- 身份验证 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-s-check"></i>
        <span>身份验证</span>
      </div>
      <div class="form-content">
        <div class="form-item">
          <label>证件类型</label>
          <el-select v-model="formData.idType" placeholder="请选择证件类型" style="width: 100%">
            <el-option label="身份证" value="身份证"></el-option>
            <el-option label="工作证" value="工作证"></el-option>
            <el-option label="护照" value="护照"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </div>

        <div class="form-item">
          <label>证件号码</label>
          <el-input 
            v-model="formData.idNumber" 
            placeholder="请输入证件号码"
            clearable
          ></el-input>
        </div>

        <div class="form-item">
          <label>职务证明编号</label>
          <el-input 
            v-model="formData.certificationNo" 
            placeholder="请输入职务证明编号"
            clearable
          ></el-input>
        </div>

        <div class="verification-tip">
          <i class="el-icon-info"></i>
          <span>填写完整的身份信息有助于快速验证报告人的真实性和权限合法性</span>
        </div>
      </div>
    </div>

    <!-- 报告权限 -->
    <div class="form-section">
      <div class="section-header">
        <i class="el-icon-s-custom"></i>
        <span>报告权限</span>
      </div>
      <div class="form-content">
        <div class="form-item">
          <label>报告级别</label>
          <el-select v-model="formData.reportLevel" placeholder="请选择报告级别" style="width: 100%">
            <el-option label="一级（重大）" value="一级"></el-option>
            <el-option label="二级（较大）" value="二级"></el-option>
            <el-option label="三级（一般）" value="三级"></el-option>
            <el-option label="四级（较小）" value="四级"></el-option>
          </el-select>
        </div>

        <div class="form-item">
          <label>授权范围</label>
          <el-checkbox-group v-model="formData.authorizations">
            <div class="auth-item">
              <el-checkbox label="事件录入">事件录入</el-checkbox>
            </div>
            <div class="auth-item">
              <el-checkbox label="进展更新">进展更新</el-checkbox>
            </div>
            <div class="auth-item">
              <el-checkbox label="资源调配">资源调配</el-checkbox>
            </div>
            <div class="auth-item">
              <el-checkbox label="结案报告">结案报告</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button 
        type="default" 
        size="large"
        @click="handleReset"
        style="flex: 1;"
      >
        重置
      </el-button>
      <el-button 
        type="primary" 
        size="large"
        @click="handleSave"
        style="flex: 2;"
      >
        保存报告人信息
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveReporterInfo } from './service';

export default {
  name: 'ReporterInfo',
  
  data() {
    return {
      formData: {
        name: '',
        gender: '男',
        position: '',
        organization: '',
        department: '',
        phone: '',
        officePhone: '',
        email: '',
        emergencyContact: '',
        emergencyPhone: '',
        idType: '身份证',
        idNumber: '',
        certificationNo: '',
        reportLevel: '',
        authorizations: []
      }
    };
  },

  methods: {
    handleSave() {
      // 必填项验证
      if (!this.formData.name) {
        this.$message.warning('请输入报告人姓名');
        return;
      }
      if (!this.formData.position) {
        this.$message.warning('请输入职务');
        return;
      }
      if (!this.formData.organization) {
        this.$message.warning('请输入所属单位');
        return;
      }
      if (!this.formData.phone) {
        this.$message.warning('请输入手机号码');
        return;
      }
      
      // 手机号验证
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!phoneReg.test(this.formData.phone)) {
        this.$message.warning('请输入正确的手机号码');
        return;
      }

      const loading = this.$loading({
        lock: true,
        text: '保存中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      saveReporterInfo(this.formData)
        .then(() => {
          loading.close();
          this.$notify({
            title: '✅ 保存成功',
            message: '报告人信息已保存',
            type: 'success',
            duration: 2000,
            position: 'top-right',
            offset: 60
          });
          this.handleReset();
        })
        .catch(error => {
          loading.close();
          this.$message.error(error.message || '保存失败');
        });
    },

    handleReset() {
      this.formData = {
        name: '',
        gender: '男',
        position: '',
        organization: '',
        department: '',
        phone: '',
        officePhone: '',
        email: '',
        emergencyContact: '',
        emergencyPhone: '',
        idType: '身份证',
        idNumber: '',
        certificationNo: '',
        reportLevel: '',
        authorizations: []
      };
      this.$message.info('表单已重置');
    }
  }
};
</script>

<style scoped>
.reporter-info {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.form-section {
  background: white;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.section-header i {
  font-size: 20px;
  margin-right: 8px;
}

.form-content {
  padding: 15px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-item label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.required {
  color: #F56C6C;
  margin-left: 3px;
}

.verification-tip {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 8px;
  border-left: 3px solid #409EFF;
  margin-top: 15px;
}

.verification-tip i {
  font-size: 18px;
  color: #409EFF;
  margin-right: 8px;
  flex-shrink: 0;
  margin-top: 1px;
}

.verification-tip span {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.auth-item {
  padding: 8px 0;
}

/* 操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 15px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  gap: 10px;
}

.action-buttons .el-button {
  border-radius: 6px;
  font-size: 15px;
  height: 46px;
  font-weight: 500;
}
</style>

